<script setup lang="ts">
import http from '@/tools/http'
import type { DataTableColumns, DataTableRowKey } from 'naive-ui'
import { NButton, NDataTable, NDatePicker, NForm, NFormItem, NInput, NPagination, NSpace } from 'naive-ui'
import { h, onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import ApproveForm from '../component/approve-form/index.vue'

const router = useRouter()

type RowData = {
    userTaskId?: string
    instanceId?: string
    instanceName?: string
    modelId?: string
    modelVersion?: string
    taskId: string
    taskName?: string
    taskType?: string
    objType?: string
    objId?: string
    userId?: string
    userName?: string
    createTime?: string
}

const rowKeys = ref<DataTableRowKey[]>([])

const userTaskTableColumns: DataTableColumns<RowData> = [
    {
        type: "selection",
        disabled(row: RowData) {
            return row.taskType !== "1"
        },
    }, {
        title: "流程名称",
        key: "instanceName",
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "任务名称",
        key: "taskName",
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "提交人",
        key: "userName",
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "提交时间",
        key: "createTime",
        ellipsis: {
            tooltip: true
        }
    }, {
        title: "操作",
        key: "actions",
        fixed: 'right',
        render(rowData: RowData, rowIndex: number) {
            return h(
                NSpace, null,
                () => [
                    h(
                        NButton,
                        {
                            size: "small",
                            onclick: () => openFlowProcess(rowData)
                        },
                        { default: () => "办理" }
                    )
                ]
            )
        }
    }
]

const userTaskData = reactive<any>({
    list: [],
    pageNum: 1,
    pageSize: 10,
    pages: 1,
    total: 0
})

const userTaskSearchFormValue = reactive({
    pageNum: 1,
    pageSize: 10,
    instanceName: "",
    userName: "",
    createTimeRange: undefined
})

const approveFormVisiable = ref<boolean>(false)

onMounted(() => {
    pageUserTask()
})

function pageNumChange(pageNum: number) {
    userTaskSearchFormValue.pageNum = pageNum
    pageUserTask()
}

function pageSizeChange(pageSize: number) {
    userTaskSearchFormValue.pageSize = pageSize
    pageUserTask()
}

function openFlowProcess(rowData: RowData) {
    let mode = "3"
    if (rowData.taskName === "流程开始") {
        mode = "5"
    }
    router.push({
        name: "workflow-info",
        query: {
            instanceId: rowData.instanceId,
            modelId: rowData.modelId,
            modelVersion: rowData.modelVersion,
            mode: mode,
            taskId: rowData.taskId
        }
    })
}

function pageUserTask() {
    let start = ""
    let end = ""
    if (userTaskSearchFormValue.createTimeRange) {
        start = userTaskSearchFormValue.createTimeRange[0]
        end = userTaskSearchFormValue.createTimeRange[1]
    }
    const request = {
        pageNum: userTaskSearchFormValue.pageNum,
        pageSize: userTaskSearchFormValue.pageSize,
        instanceName: userTaskSearchFormValue.instanceName,
        userName: userTaskSearchFormValue.userName,
        userTaskStatus: "0",
        createTimeStart: start,
        createTimeEnd: end
    }
    http.post("/workflow/ru/user/task/page", request).then(({ data }) => {
        if (data.code === "0") {
            userTaskData.pageNum = data.data.pageNum
            userTaskData.pageSize = data.data.pageSize
            userTaskData.pages = data.data.pages
            userTaskData.total = data.data.total
            userTaskData.list.length = 0
            for (let i = 0; i < data.data.list.length; i++) {
                userTaskData.list.push(data.data.list[i])
            }
            rowKeys.value.length = 0
        }
    })
}
</script>

<template>
    <div id="flame-container">
        <div class="search">
            <n-form :model="userTaskSearchFormValue" inline label-placement="left">
                <n-form-item label="流程名称" path="instanceName">
                    <n-input v-model:value="userTaskSearchFormValue.instanceName" placeholder="请输入流程名称" clearable />
                </n-form-item>
                <n-form-item label="提交人名称" path="userName">
                    <n-input v-model:value="userTaskSearchFormValue.userName" placeholder="请输入提交人名称" clearable />
                </n-form-item>
                <n-form-item label="提交时间">
                    <n-date-picker v-model:formatted-value="userTaskSearchFormValue.createTimeRange" type="daterange"
                        placeholder="请选择日期范围" clearable />
                </n-form-item>
                <n-form-item>
                    <n-button attr-type="button" @click="pageUserTask()">查询</n-button>
                </n-form-item>
            </n-form>
        </div>
        <div class="btn-group">
            <n-button attr-type="button" :disabled="rowKeys.length === 0"
                @click="approveFormVisiable = true">批量处理</n-button>
        </div>
        <div class="data-table">
            <n-data-table :scrollbar-props="{ trigger: 'none' }" style="height:100%" flex-height
                :columns="userTaskTableColumns" :data="userTaskData.list" :row-key="(row: RowData) => row.taskId"
                v-model:checked-row-keys="rowKeys" :bordered="false" />
        </div>
        <div class="pagination">
            <n-pagination style="float:right" v-model:page="userTaskData.pageNum" :page-size="userTaskData.pageSize"
                :item-count="userTaskData.total" :page-sizes="[5, 10, 30, 50, 100]" :on-update-page="pageNumChange"
                :on-update-page-size="pageSizeChange" show-quick-jumper show-size-picker />
        </div>
    </div>
    <approve-form v-model:visiable="approveFormVisiable" :task-id-list="rowKeys" @complete="pageUserTask()" />
</template>

<style scoped></style>